<template>
  <div class='page-container'>
    <h1>pinia使用</h1>
    <div class="span myred">Pinia是vue3里面主推的状态管理工具,相比较vuex而言pinia更简洁.没有了mutations和modules 只有state getter actions
      action里面可以写异步也可以写同步.然后它的打包体积也变的更小.对ts的支持也更好.
      通过一个defineStore定义一个模块.第一个参数要传入一个唯一的id就可以区分开不同模块.
      使用的时候.可以在页面中通过导入这个pinia中定义的store,就可以直接调用state 以及gtters里面的函数,也可以直接调用actions修改状态.还可以使用$patch修改多个,
      如果取到的数据想要通过解构赋值使用的话.可以使用storeToRefs来实现共享状态的响应式 .总之而言感觉更简便了.不怎么难
      它和vuex一样也是存储在内存里面的.所以刷新也会消失.解决方式和vuex一样.持久化插件.或者通过本地存储自己存</div>
    <div class="container">
      <div class="left">
        <h1>商品列表页</h1>
        <ul>
          <li v-for="item in shop.shopList" :key="item.id">{{ item.name }}-￥{{ item.price }}-数量:{{ item.count
            }}<button @click="handleAddToCart(item)">添加到购物车</button></li>

        </ul>
      </div>
      <div class="right">
        <h1>购物车列表页vuex获取到的数据{{ hasChanged }}</h1>
        <ul>
          <li v-for="item in shopCarStore.carList" :key="item.id">{{ item.name }}-￥{{ item.price }}-数量:{{ item.count
            }}</li>
          <!-- <li v-for="item in newcartList" :key="item.id">{{ item.name }}-￥{{ item.price }}-数量:{{ item.count
            }}</li> -->

        </ul>
      </div>
      <!-- 取值的两种方式 -->
      {{ carList }}
      {{ shopCarStore.carList }}
    </div>
  </div>
</template>
<script setup lang='ts'>
/**
 * 模块引入
 */
import useShopCarStore from "@/store/modules/shopCar"
import { storeToRefs } from 'pinia'
const shopCarStore = useShopCarStore()
// const { carList, hasChanged } = shopCarStore
const { carList, hasChanged } = storeToRefs(shopCarStore)
const shop = reactive({
  shopList: [
    {
      id: 2,
      name: "苹果17",
      price: 9999,
      count: 10,
    }, {
      id: 3,
      name: "OppoK10Pro",
      price: 1349,
      count: 10,
    }, {
      id: 5,
      name: "华为Meta60",
      price: 6899,
      count: 11,
    }, {
      id: 6,
      name: "一加8",
      price: 1999,
      count: 14,
    },
  ]
})
console.log("拿到pinia的值", carList)
// const shopCarList = computed(() => {
//   console.log("触发取值", shopCarStore.carList)
//   // vuex/pinia数据刷新会消失.就会边恒只有id是1的商品
//   // 想要的是持久化不消失的  判断如果从pinia里面取到的只有一个商品.并且是id是1.
//   // 不要了要sessionStorage里面的,如果有多个元素.那么直接去pinia的.


//   if (shopCarStore.carList.length > 1) {
//     return shopCarStore.carList
//   } else {
//     return JSON.parse(sessionStorage.getItem('carList')) ? JSON.parse(sessionStorage.getItem('carList')) : [
//       {
//         id: 1,
//         name: "默认买小米",
//         price: 1000,
//         count: 1
//       }
//     ];

//   }

// })

// 使用pinia的时候.在页面中通过import导入这个模块. 模块的执行结果.是一个模块实例. 点到state里面的状态
// 或者是点到action里面的方法


// pinia存值
function handleAddToCart(params: type) {
  shopCarStore.addToCart(params)
  // shopCarStore.carList.push(params)    //一个一个的修改
  // shopCarStore.$patch((state) => {  //能够批量修改
  //   state.carList.push(params)
  //   state.hasChanged = true
  // })

}

</script>
<style lang='scss' scoped>
.page-container {}
</style>